<!-- 文章管理 -->
<template>
  <ContainerSlot>
    <template>
      <template v-if="!articleVisible" slot="searchModule">
        <SearchForm :labelWidth="'120px'" :formConfig="formConfig" :formData="formData" :slotList="slotList"
          ref="ruleForm">
          <template slot="searchBtn">
            <el-button type="primary" @click.prevent="search()">查询</el-button>
          </template>
          <template slot="resetBtn">
            <el-button @click.prevent="resetForm()">重置</el-button>
          </template>
        </SearchForm>
      </template>
      <template slot="operationModule">
        <CategoryBar v-show="!articleVisible" class="noIcon" :categoryList="categoryList" @categoryBar="categoryBar" />
      </template>
      <template slot="contentModule">
        <div class="article-box" v-show="!articleVisible">
          <div class="article" v-loading="loading">
            <div class="card" v-for="item in articleList" :key="item.id">
              <div class="cardLeft">
                <div class="title">
                  <span class="title-txt" @click="loadArticleDetail(item)">{{ item.title }}</span>
                  <span class="time">发布时间：{{ item.createTime }}</span>
                </div>
                <div class="content" v-html="item.contentNoImg"></div>
              </div>
              <div class="cardBtn" v-show="auditStatus == 0">
                <el-button type="primary" @click="approved(item)">通过审核</el-button>
                <el-button type="warning" @click="unApproved(item)">不通过审核</el-button>
              </div>
              <div class="cardBtn" v-show="auditStatus == 1">
                <img src="@/assets/breed-aquatics-popular/tongguo.png" alt="">
              </div>
              <div class="cardBtn" v-show="auditStatus == 2">
                <img class="mr-20" src="@/assets/breed-aquatics-popular/weitongguo.png" alt="">
                <el-button type="warning" @click="loadReason(item)">未通过原因</el-button>
              </div>
            </div>

            <div class="noData" v-show="articleList.length == 0">
              暂无数据
            </div>
          </div>
        </div>
      </template>
      <template slot="footerModule">
        <el-pagination v-show="!articleVisible" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" background :page-size="pageSize"
          :page-sizes="[10, 20, 30]" layout="prev, pager, next, jumper" :total="total">
        </el-pagination>
      </template>
    </template>
    <template v-if="articleVisible">
      <template slot="operationModule">
        <div class="mt-20">
          <el-button @click="cancelExamine">返回</el-button>
          <el-button v-show="auditStatus == 0" type="primary" @click="approved()">通过审核</el-button>
          <el-button v-show="auditStatus == 0" type="warning" @click="unApproved()">不通过审核</el-button>
        </div>
      </template>
      <template slot="contentModule">
        <div class="articleTitle">{{ article.title }}</div>
        <div class="articleContent" v-html="article.content"></div>
      </template>
    </template>
  </ContainerSlot>
</template>

<script>
import ContainerSlot from '@/components/Container'
import SearchForm from '@/components/Form'
import Table from '@/components/Table'
import CategoryBar from '@/components/CategoryBar'

import articleExamineApi from "@/api/breed-aquatics-popular/knowledge-base-management/article-examine"

export default {
  name: '',
  components: { ContainerSlot, SearchForm, Table, CategoryBar },
  data () {
    return {
      // 表单配置
      formConfig: [
        {
          label: '文章关键词',
          prop: 'name',
          type: 'input',
          width: '150px'
        },
        {
          label: '发布日期',
          prop: 'date',
          type: 'daterange',
          width: '240px'
        }
      ],
      //插槽
      slotList: [{
        slotName: 'searchBtn'
      },
      {
        slotName: 'resetBtn'
      }],
      // 表单数据
      formData: {
        name: '',
        date: [],
      },
      categoryList: [
        { id: 1, mark: 'status', name: "待审核", value: 0 },
        { id: 2, mark: 'status', name: "审核通过", value: 1 },
        { id: 3, mark: 'status', name: "审核未通过", value: 2 },
      ],
      auditStatus: 0,
      // 文章
      loading: false,
      articleList: [],
      // 分页
      total: 0,
      currentPage: 1,
      pageSize: 10,
      articleVisible: false,
      article: {}
    }
  },
  mounted() {
    
  },
  methods: {
    // 请求文章列表
    queryPageList() {
      this.loading = true
      articleExamineApi.queryPageByCondition({
        page: this.currentPage,
        size: this.pageSize,
        condition: {
          auditStatus: this.auditStatus,
          content: this.formData.name,
          beginTime: this.formData.date && this.formData.date[0] && this.formData.date[0] + ' 00:00:00',
          endTime: this.formData.date && this.formData.date[1] && this.formData.date[1] + ' 23:59:59'
        }
      }).then(res => {
        let { data } = res
        data.content.map(el => {
          el.contentNoImg = el.content.replace(/<.*?>/ig,"")
        })
        this.articleList = data.content
        this.total = data.totalElements
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 搜索
    search() {
      this.currentPage = 1
      this.queryPageList()
    },
    resetForm () {
      this.$refs.ruleForm.resetForm()
      this.search()
    },
    handleCurrentChange (e) {
      this.currentPage = e
      this.queryPageList()
    },
    handleSizeChange (e) {
      this.pageSize = e
      this.queryPageList()
    },
    categoryBar (item, i) {
      this.auditStatus = ''
      if (item.mark === 'status') this.auditStatus = item.value
      this.currentPage = 1
      this.queryPageList()
    },
    loadArticleDetail(row) {
      this.article = row
      this.articleVisible = true
    },
    cancelExamine() {
      this.articleVisible = false
    },
    approved(row) {
      this.$confirm("确定通过审核吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      }).then(() => {
        articleExamineApi.audit({
          articleId: row ? row.articleId : this.article.articleId,
          pass: true,
          remark: ''
        }).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg)
            this.queryPageList()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    unApproved(row) {
      this.$prompt('不通过原因', '不通过审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator(value) { if (!value || !value.trim()) return false },
        inputErrorMessage: '请输入不通过原因'
      }).then(({ value }) => {
        articleExamineApi.audit({
          articleId: row ? row.articleId : this.article.articleId,
          pass: false,
          remark: value.trim()
        }).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg)
            this.queryPageList()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    loadReason(row) {
      this.$alert(row.auditRemark, '未通过原因', {
        confirmButtonText: '确定'
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.formList {
  position: relative;
  .search {
    position: absolute;
    top: 0;
    right: 10px;
  }
  .subLabel {
    color: #6f7374;
  }
}
.noIcon {
  margin: 0;
  .btn-item {
    background: #fff;
  }
}
.article-box {
  height: calc(100% - 10px);
  .article {
    height: 100%;
    overflow: auto;
    .card {
      display: flex;
      padding: 15px 10px;
      border-bottom: 1px dashed #639eda;
      .cardLeft {
        max-width: calc(100% - 210px);
        flex: 1;
        .title {
          display: inline-block;
          color: #639eda;
          font-size: 22px;
          cursor: pointer;
          span {
            font-size: 16px;
            color: #6f7374;
            &.title-txt {
              color: #639eda;
              font-size: 22px;
              cursor: pointer;
            }
            &.time {
              margin-left: 20px;
            }
            &.user {
              float: right;
              &>span:first-child {
                margin-right: 15px;
              }
            }
          }
        }
        .content {
          margin-top: 10px;
          text-indent: 2em;
          line-height: 24px;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
      .cardBtn {
        width: 210px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    }
    .noData {
      margin-top: 30px;
      text-align: center;
      font-size: 16px;
    }
  }
}
.articleTitle {
  color: #639eda;
  font-size: 26px;
  text-align: center;
}
.articleContent {
  text-indent: 2em;
  line-height: 26px;
  margin-top: 5px;
  height: calc(100% - 35px);
  overflow: auto;
  ::v-deep .ql-video {
    display: block;
    max-width: 50%;
    margin-left: 2em;
  }
}
</style>
